<!DOCTYPE HTML> 
<script type="text/javascript" src="../jooscript.js"></script><script type="text/javascript" src="../fxcanvas.js"></script><!--[if IE]><script type="text/javascript" src="../flash_backend.js"></script><![endif]--><comment><script type="text/javascript" src="../canvas_backend.js"></script></comment>
.
<canvas id=c1 width=256 height=1000 style="border:1px black solid"></canvas> 
<canvas id=c2 width=256 height=1000 style="border:1px black solid"></canvas> 
<script> 
function draw(ctx)
{
	ctx.lineWidth = 0.5;
 
	ctx.translate(32, 32);
 
	var x = [
		[0, 0],
		[Math.PI, Math.PI],
		[0, -1e-2],
		[0, 1e-2],
		[0, Math.PI],
		[0, Math.PI/2],
		[0, -Math.PI/2],
		[0, 2*Math.PI-1e-2],
		[0, 2*Math.PI+1e-2],
		[0, 3*Math.PI-1e-2],
		[0, 4*Math.PI-1e-2],
		[0, 4*Math.PI+1e-2],
		[0, 9*Math.PI-1e-2],
		[0, 9.2*Math.PI],
		[0, 100*Math.PI-1e-2]
	];
 
	for (var i = 0; i < x.length; ++i)
	{
		ctx.beginPath();
		ctx.moveTo(-32, 32.5);
		ctx.lineTo(224, 32.5);
		ctx.stroke();
 
		ctx.beginPath();
		ctx.moveTo(0, -8);
		ctx.arc(0, 0, 24, x[i][0], x[i][1], true);
		ctx.lineTo(0, 8);
		ctx.stroke();
 
		ctx.translate(64, 0);
 
		ctx.beginPath();
		ctx.moveTo(0, -8);
		ctx.arc(0, 0, 24, x[i][0], x[i][1], false);
		ctx.lineTo(0, 8);
		ctx.stroke();
 
		ctx.translate(64, 0);
 
		ctx.beginPath();
		ctx.moveTo(0, -8);
		ctx.arc(0, 0, 24, x[i][1], x[i][0], true);
		ctx.lineTo(0, 8);
		ctx.stroke();
 
		ctx.translate(64, 0);
 
		ctx.beginPath();
		ctx.moveTo(0, -8);
		ctx.arc(0, 0, 24, x[i][1], x[i][0], false);
		ctx.lineTo(0, 8);
		ctx.stroke();
 
		ctx.translate(-192, 64);
	}
}
 
window.onload = function ()
{
	var ctx = document.getElementById('c1').getContext('2d');
	draw(ctx);
	
	ctx = document.getElementById('c2').getContext('2d');
	ctx.arc = function (x, y, radius, startAngle, endAngle, anticlockwise)
	{
		var step = 0.01;
		var da = endAngle - startAngle;
	
		var d;
		if (anticlockwise && (da > 0 || da < -2*Math.PI))
			d = da % (2*Math.PI) - 2*Math.PI;
		else if (!anticlockwise && (da < 0 || da > 2*Math.PI))
			d = da % (2*Math.PI) + 2*Math.PI;
		else
			d = da % (2*Math.PI);
 
		// Loop from startAngle to startAngle+r, with funny stuff to make sure it's stepping in the right direction
		for (var a = startAngle; (d >= 0 ? a <= startAngle+d : a >= startAngle+d); a += (d >= 0 ? step : -step))
			ctx.lineTo(radius*Math.cos(a), radius*Math.sin(a));
	};
	draw(ctx);
}
</script> 
